<template>
  <el-dialog :title="dialogFrom.title" :visible.sync="dialogFrom.dialogVisible" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
    <el-form ref="subFromDialog" :model="dialogFrom.form">
      <!-- :rules="item.attribute.rules" -->
      <el-form-item v-for="(item,index) of dialogFrom.fieldList" :key="index" :prop="item.attribute.labelKey" :label-width="item.attribute.labelWidth||'100'" :label="item.attribute.label">
        <component :attribute="item.attribute" :is="item.templateName" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFrom.dialogVisible = false">取消</el-button>
      <el-button @click="subFromDialogEmitFun(item)" v-for="(item,index) of dialogFrom.btn" :loading="item.loading" :key="index" :icon="item.icon" type="primary">{{item.text}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import datePicker from "@/components/formTemp/datePicker";
import inputString from "@/components/formTemp/inputString";
import selectBase from "@/components/formTemp/selectBase";
export default {
  name: "subFromDialog", //提交表单的Dialog
  components: { datePicker, inputString, selectBase },
  props: {
    dialogFrom: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    // 做清空处理
    "dialogFrom.dialogVisible"(val) {
      if (!val) {
        let fieldList = this.dialogFrom.fieldList;
        for (let index = 0; index < fieldList.length; index++) {
          const attribute = fieldList[index].attribute;
          const labelValueType = typeof attribute.labelValue;
          if (labelValueType == "object") {
            attribute.labelValue = [];
          } else {
            attribute.labelValue = "";
          }
        }
      }
    }
  },
  methods: {
    // 调取父组件方法
    async subFromDialogEmitFun(item) {
      if (item.functionType == "submit") {
        //  如果是提交表单则进行验证
        const subFromRes = await this.checkFrom(this.dialogFrom.fieldList);
        if (!subFromRes.isPass) {
          return;
        }
        // console.log(subFromRes);
        this.$emit("subFromDialogEmitFun", item, subFromRes.keyAndValue);
        //  this.$emit("subFromDialogEmitFun", functionName);
        // this.$refs["subFromDialog"].validate(valid => {
        //   if (valid) {
        //     this.$emit("subFromDialogEmitFun", functionName);
        //   } else {
        //     this.$message({
        //       message: "请填写必填信息",
        //       type: "warning"
        //     });
        //     return false;
        //   }
        // });
      } else {
        this.$emit("subFromDialogEmitFun", item);
      }
    },
    // 进行校验和数据整理
    checkFrom(fieldList) {
      return new Promise(resolve => {
        let value = {
          isPass: true,
          keyAndValue: {}
        };
        for (let index = 0; index < fieldList.length; index++) {
          const attribute = fieldList[index].attribute;
          const labelValueType = typeof attribute.labelValue;
          if (
            attribute.rules && //有校验字段
            attribute.rules.length && //有校验规则
            attribute.rules[0].required && //必填
            ((labelValueType == "string" && !attribute.labelValue) || //字符类型并且没有值
              (labelValueType == "object" && !attribute.labelValue.length)) //数组类型并且没有值
          ) {
            this.$message({
              message: `${attribute.placeholder || "请填写"}${attribute.label ||
                "表单必填信息"}`,
              type: "warning"
            });
            value.isPass = false;
            break;
          } else {
            value.keyAndValue[attribute.labelKey] = attribute.labelValue;
          }
        }
        resolve(value);
      });
    }
  }
};
</script>
